<template>
    <div class="goods">
        <Navbar title="商品页面"></Navbar>
        <!-- 单个商品的所有内容 -->
        <div class="goods-list">

            <!-- 遍历的购物列表 -->
            <div class="goods-item" v-for="item in goodsListArr" :key="item.id" @click="lookMore(item.id)"> 
                <!-- 商品图片(动态) -->
                <img :src="item.imgUrl" />
                <h1 class="title">{{item.title}}</h1>
                <!-- 商品信息 -->
                <div class="info">
                    <!-- 商品价格 -->
                    <p class="price">
                        <!-- 现价 -->
                        <span class="now">{{item.newPrice}}</span>
                        <!-- 原价 -->
                        <del><span class="old">{{item.oldPrice}}</span></del>
                    </p>
                    <!-- 热卖信息 -->
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩下<span class="kc">{{item.inStock}}</span>件</span>
                    </p>
                </div>
            </div>
        </div> 
        <mt-button type="danger" size="large" @click="lookMoreGoods" :disabled="dislook">查看更多商品</mt-button>
    </div>
</template>
<script>
    import { Toast } from 'mint-ui';
    export default{
        name:"goodsList",
        data(){
            return{
                goodsListArr:[],
                current:1,
                pages:1,
                dislook:false
            }
        },
        created(){
            // 点击进入渲染   页面加载列表
            this.getGoodsList()
        },
        methods:{
            getGoodsList(){
                this.$axios.get("/selectGoodsPageList?current="+this.current)
                .then(res=>{
                    console.log(res.data)
                    this.goodsListArr = this.goodsListArr.concat(res.data.records)
                    this.pages  = res.data.pages;
                })
                .catch(err=>{
                    console.log(err)
                })
            },
            lookMore(a){
                // console.log(1) 跳转路由
                this.$router.push({
                    name:"goodsInfo",
                    query:{id:a}
                })
            },
            lookMoreGoods(){
                this.current++
                if(this.current>this.pages){
                    Toast("已经到底了") 
                    this.dislook = true
                    return;
                }
                this.getGoodsList()
            }
        }
    }
</script>
<style lang="css" scoped>
    .goods{
        margin-top:40px;
        margin-bottom:60px;
    }
    .goods-list{
     display: flex;
     flex-wrap: wrap;
     padding: 7px;
     justify-content: space-between;
}
.goods-item {
    width: 48%;
    border: 1px solid #ccc;
    box-shadow: 0 0 8px #ccc;
    margin: 4px 0;
    padding: 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 293px;
  }
  img {
      width: 100%;
    }
    .title {
      font-size: 14px;
    }

    .info {
      background-color: #eee;
    }
    p {
        margin: 0;
        padding: 5px;
    }
    .price .now {
        color: red;
        font-weight: bold;
        font-size: 16px;
        }
    .price .old {
        text-decoration: line-through;
        font-size: 14px;
        margin-left: 10px;
        }
    .sell {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }
    .kc{
        font-size: 18px;
        color: green;
    }

</style>